<template>
	<view>
		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for="(value, key) in commodity" :key="key" v-if="key.startsWith('image')">
				<image class="swiper-image" :src="value" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="wrap">
			<u-row>
				<u-col span="3">
					<h3>{{ commodity.name }}</h3>
				</u-col>
				<u-col span="10">
					<h5 :style="{ color: '#999' }"> | {{ commodity.parameter }}</h5>
				</u-col>
			</u-row>
		</view>
		<hr class="separator"> <!-- 添加分隔线 -->
		<h5 class="five">商品详情:</h5>
		<view class="wrap">
			<u-row>
				<u-col span="12">
					<div class="info-box">
						<h5 class="info-item" style="margin-bottom: 5px;">价 格: <span
								:style="{ color: '#DC143C' }">{{ commodity.price }}{{commodity.unitPrice}}</span></h5>
						<h5 class="info-item" style="margin-bottom: 5px;">库 存: <span
								:style="{ color: '#DC143C' }">{{ commodity.inventory }}{{commodity.unitInventory}}</span>
						</h5>
						<h5 class="info-item" style="margin-bottom: 5px;">分 类: <span
								:style="{ color: '#DC143C' }">{{ commodity.classification }}</span></h5>
						<h5 class="info-item">商品描述: <span :style="{ color: '#DC143C' }">{{ commodity.describe }}</span>
						</h5>
					</div>
				</u-col>
			</u-row>
		</view>
		<!-- 商品详情下面显示 detailedImages -->
		<view v-if="commodity.detailedImages" class="detailed-images">
			<h5 >商品详情图:</h5>
			<image :src="commodity.detailedImages" mode="widthFix" class="detailed-image"></image>
		</view>

		<u-button type="primary" class="buy-button" @click="buy()"> 点击购买</u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityId: null,
				token: null,
				//商品
				commodity: {
					id: null,
					name: null,
					describe: null,
					parameter: null,
					price: null,
					unitPrice: null,
					inventory: null,
					unitInventory: null,
					supplierAccount: null,
					image1: null,
					image2: null,
					image3: null,
					detailedImages: null,
					classification: null,
				},
			}
		},
		created() {
			//获取商品id
			this.getcommodityId();
			this.recordToken();
			this.getById();
		},
		methods: {
			/**
			 * @param {Object} url
			 * 点击购买执行的函数
			 */
			buy(){
				const url = '/pages/buy/buy?id=' + this.commodityId;
				this.goto(url);
			},
			
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			/**
			 * 获取JWT
			 */
			recordToken() {
				this.token = localStorage.getItem('token');
				console.log(this.token);
			},
			
			/**
			 * 根据url获取商品id
			 */
			getcommodityId() {
				this.commodityId = this.$route.query.id;
				// alert(this.commodityId);
			},

			/**
			 * 根据id，获得商品详情
			 */
			getById() {
				const url = "http://localhost:8088/buyer-commodity/" + this.commodityId;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.commodity = res.data.data;
						console.log(this.commodity);
						// this.supplierGroups = this.chunkArray(this.suppliers, 3);
						// console.log(this.supplierGroups);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			}
		}
	}
</script>

<style>
	.swiper-box {
		height: 750rpx;
		background-color: #fff;

		.swiper-image {
			width: 750rpx;
		}
	}

	.wrap {
		padding: 24rpx;
	}

	.info-box {
		background-color: #f0f0f0;
		/* 浅灰色背景 */
		padding: 15px;
		/* 内边距 */
	}

	.info-item {
		text-align: justify;
		/* 对齐文本 */
		line-height: 1.4;
		/* 行高 */
	}

	.info-item span {
		margin-left: 15px;
		/* 左边距 */
	}

	.five {
		margin-left: 10px;
		margin-top: 10px;
	}

	.separator {
		border: none;
		border-top: 1px solid #999;
		/* 分隔线样式 */
		margin: 0 10px;
		font-weight: bold;
		/* 加粗 */
	}

	.buy-button {
		position: fixed;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
	}

	.detailed-images {
		margin-top: 0px;
		padding: 10px;
		padding-top: 0;
	}

	.detailed-image {
		margin-top: 15px;
		width: 100%;
	}
</style>